<template>
  <el-row class="app-iframe-container">
    <el-form :model="query" size="small" label-width="140px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="新建时间:" class="date-range" style="with: 100%">
            <el-date-picker style="width: 100%"
                            v-model="createDateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="timestamp"
                            end-placeholder="结束日期"
                            @change="formatterCreateDateRange"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" :gutter="2" justify="center">
        <el-col :span="2.5">
          <el-button type="warning" size="mini" icon="el-icon-search" @click="btnSearch">查询</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button type="primary" size="mini" icon="el-icon-download" @click="btnExport">导出
          </el-button>
        </el-col>
      </el-row>
      <!--表格操作按钮-->
      <el-row type="flex" justify="start" :gutter="3">
        <el-col :span="2.4">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="create">新建
          </el-button>
        </el-col>
        <el-col :span="2.4">
          <el-button size="mini" icon="el-icon-document" type="primary" :disabled="currentSelectionId==null"
                     @click="update">修改
          </el-button>
        </el-col>
        <el-col :span="2.4">
          <el-button size="mini" icon="el-icon-document" type="danger" :disabled="currentSelectionId==null"
                     @click="deleteConfirm">删除
          </el-button>
        </el-col>
        <el-col :span="2.4">
          <el-button size="mini" icon="el-icon-document" type="danger" key="013007001000000003"
                     :disabled="currentSelectionId==null" @click="deleteAgain">删除弹出框
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-top: 1em; margin-bottom: 0.5em;">
      <el-col :span="24" class="table-wrapper">
        <el-table v-loading="loading" element-loading-text="玩命加载中" :data="tableData" border
                  :highlight-current-row="true" size="medium">+
          <el-table-column label="选择" width="50">
            <template slot-scope="scope">
              <el-radio v-model="currentSelectionId" :label="scope.row.id" @change="handleSelect(scope.row)"><i></i>
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="主键" width="120">
            <template slot-scope="scope">
              <a href="javascript:void(0);" @click="toDetailPage(scope.row)">{{ scope.row.id }}</a><i></i>
            </template>
          </el-table-column>
          <el-table-column prop="account" label="登录帐号" width="120"></el-table-column>
          <el-table-column prop="password" label="密码" width="120"></el-table-column>
          <el-table-column prop="status" label="状态,0:删除,1有效,2冻结" width="120"></el-table-column>
          <el-table-column prop="version" label="版本号" width="120"></el-table-column>
          <el-table-column prop="remark" label="备注" width="120"></el-table-column>
          <el-table-column prop="createAccount" label="创建人" width="120"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="120"></el-table-column>
          <el-table-column prop="updateAccount" label="修改人" width="120"></el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="120"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog title="请输入删除原因" :visible.sync="dialogVisible" width="40%">
      <el-input v-model="updataQuery.remark" placeholder="最多输入200个汉字"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitMethod">提交 </el-button>
        <el-button @click="cancelMethod">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 分页组件 -->
    <el-row>
      <el-col :span="24">
        <el-pagination @size-change="pageSizeChange" @current-change="pageChange" :current-page="query.pageNum"
                       :page-sizes="[10, 20, 30, 50]" :page-size="query.pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="query.totalCount"></el-pagination>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import {accountApi} from '@/service/account/account-api'
import {getDayStartOrEnd} from '@/util/time'

import moment from 'moment'

export default {
  data() {
    return {
      loading: true,
      dialogVisible: false,
      // 后台数据
      tableData: [],
      currentSelectionId: null,
      currentSelectData: null,
      // 工单创建 日期
      createDateRange: [],
      updataQuery: {
        id: null,
        remark: null
      },
      // 页面的查询对象
      query: {
        starCreateTime: null,
        endCreateTime: null,
        // 分页信息
        totalCount: 0,
        pageNum: 1,
        pageSize: 10,
      },
      // 一些校验规则
      rules: {}
    }
  },
  computed: {
    // 按钮控制
    btnControl: function () {
      if (this.currentSelectData === null || this.currentSelectionId === null) {
        return true
      } else {
        return false
      }
    },
  },
  methods: {
    choose(currentRow) {
      if (currentRow === null) {
        this.currentSelectionId = null
      } else {
        this.currentSelectionId = currentRow.id
      }
    },
    handleSelect(selection) {
      this.currentSelectData = selection
      this.currentSelectionId = selection.id
    },
    btnSearch() {
      this.query.pageNum = 1
      this.loading = true
      this.search()
    },
    // 页容量改变调用方法
    reSearch() {
      this.query.pageSize = 10
      this.query.pageNum = 1
      this.loading = true
      this.search()
    },
    pageSizeChange(size) {
      this.query.pageNum = 1
      this.query.pageSize = size
      this.loading = true
      this.search()
    },
    pageChange(currentPage) {
      this.query.pageNum = currentPage
      this.loading = true
      this.search()
    },
    // 搜索
    search() {
      accountApi.getPages(this.query).then((res) => {
        this.clearAllSelected()
        this.tableData = res.data.list
        this.loading = false
        this.query.totalCount = res.data.total
        if (this.tableData === undefined || this.tableData.length === 0) {
          this.$message({
            type: 'success',
            message: '暂无数据！'
          })
        }
      })
    },
    // 清除所有选中
    clearAllSelected() {
      this.currentSelectionId = null
      this.currentSelectData = null
    },
    timeToDateWithSec(row, column) {
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      if (column.property == null) {
        return ''
      }
      let date = row[column.property]
      if (!date) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    timeToDate(row, column) {
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      if (column.property == null) {
        return ''
      }
      let date = row[column.property]
      if (!date) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },
    // 导出
    btnExport() {
      // 请求进入方法后不能点
      accountApi.cfgExport(this.query).then((data) => {
        if (data.success) {
          this.$notify({
            title: '成功',
            message: '文件生成处理中，您可以继续其他工作，处理完成后，系统会给您提示，如果长时间没有提示，可以通过我的消息箱查询消息！',
            type: 'success',
            duration: 10000,
            showClose: true
          })
        } else {
          this.$notify({
            title: '失败',
            message: '文件导出失败',
            type: 'error',
            duration: 5000,
            showClose: true
          })
        }
      })
    },
    // 创建日期
    formatterCreateDateRange(timeValue) {
      if (timeValue) {
        this.query.starCreateTime = timeValue[0]
        this.query.endCreateTime = getDayStartOrEnd(timeValue[1], "end")
      } else {
        this.query.starCreateTime = null
        this.query.endCreateTime = null
      }
    },
    // 新增
    create() {
      let timestamp = (new Date()).getTime()
      this.callNewPage(`/account/accountCreate`, {
        pageName: 'create' + timestamp,
        callback: 'reSearch',
        autoClose: true
      })
    },
    // 修改
    update() {
      let timestamp = (new Date()).getTime()
      this.callNewPage(`/account/accountUpdate/${this.currentSelectionId}`, {
        pageName: 'update' + timestamp,
        callback: 'search',
        autoClose: true
      })
    },
    deleteConfirm() {
      this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      })
        .then(() => {
          accountApi.delete(this.currentSelectionId).then(() => {
            this.$message.success('删除成功')
            this.search()
          })
        })
    },
    deleteAgain() {
      this.dialogVisible = true
      this.updataQuery.id = this.currentSelectData.id
    },

    submitMethod() {
      if (this.updataQuery.remark == null) {
        this.$alert('请填写删除原因！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if (this.updataQuery.remark.length > 200) {
        this.$alert('删除原因超过两百字！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      console.log("删除原因：" + this.updataQuery.remark)
      accountApi.delete(this.updataQuery.id).then(() => {
        this.dialogVisible = false
        this.$message.success('弹框删除成功')
        this.search()
      })
    },
    cancelMethod() {
      this.dialogVisible = false
    },
    // 跳转到任务详情页面
    toDetailPage(selectedData) {
      let timestamp = (new Date()).getTime()
      this.callNewPage(`/account/accountDetail/${selectedData.id}`, {
        pageName: 'update' + timestamp,
        callback: 'search'
      })
    },
  },
  mounted() {
    this.search()
  }
}
</script>
